

import React, { useState, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import styles from './styles.module.css';

interface PersonalInfo {
  nickname: string;
  gender: string;
  age: string;
  height: string;
  weight: string;
}

interface NotificationSettings {
  mealReminder: boolean;
  goalAchievement: boolean;
  dailySummary: boolean;
  weeklyReport: boolean;
}

type SettingType = 'calorie-target' | 'personal-info' | 'notifications';

const SettingsPage: React.FC = () => {
  const navigate = useNavigate();
  const [activeSetting, setActiveSetting] = useState<SettingType>('calorie-target');
  const [dailyCalorieTarget, setDailyCalorieTarget] = useState<string>('2000');
  const [personalInfo, setPersonalInfo] = useState<PersonalInfo>({
    nickname: '张三',
    gender: 'male',
    age: '25',
    height: '175',
    weight: '70'
  });
  const [notificationSettings, setNotificationSettings] = useState<NotificationSettings>({
    mealReminder: true,
    goalAchievement: true,
    dailySummary: false,
    weeklyReport: false
  });
  const [searchInput, setSearchInput] = useState<string>('');

  useEffect(() => {
    const originalTitle = document.title;
    document.title = '食算 - 设置';
    return () => { document.title = originalTitle; };
  }, []);

  const handleSettingChange = (settingType: SettingType) => {
    setActiveSetting(settingType);
  };

  const handleCalorieTargetSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('保存每日卡路里目标:', dailyCalorieTarget);
    alert('卡路里目标保存成功！');
  };

  const handleCalorieTargetCancel = () => {
    setDailyCalorieTarget('2000');
  };

  const handlePersonalInfoSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('保存个人资料:', personalInfo);
    alert('个人资料保存成功！');
  };

  const handlePersonalInfoCancel = () => {
    setPersonalInfo({
      nickname: '张三',
      gender: 'male',
      age: '25',
      height: '175',
      weight: '70'
    });
  };

  const handleNotificationSettingsSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('保存通知设置:', notificationSettings);
    alert('通知设置保存成功！');
  };

  const handleNotificationSettingsCancel = () => {
    setNotificationSettings({
      mealReminder: true,
      goalAchievement: true,
      dailySummary: false,
      weeklyReport: false
    });
  };

  const handleAvatarUpload = () => {
    console.log('需要调用第三方接口实现头像上传功能');
    alert('头像上传功能开发中...');
  };

  const handleSearchKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      navigate('/food-search');
    }
  };

  const handleUserMenuClick = () => {
    console.log('显示用户下拉菜单');
  };

  const handleNotificationClick = () => {
    console.log('显示通知列表');
  };

  return (
    <div className={styles.pageWrapper}>
      {/* 顶部导航栏 */}
      <header className="fixed top-0 left-0 right-0 bg-white border-b border-border-light h-16 z-50">
        <div className="flex items-center justify-between h-full px-6">
          {/* Logo和产品名称 */}
          <div className="flex items-center space-x-3">
            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
              <i className="fas fa-utensils text-white text-sm"></i>
            </div>
            <h1 className="text-xl font-bold text-text-primary">食算</h1>
          </div>
          
          {/* 全局搜索框 */}
          <div className="flex-1 max-w-md mx-8">
            <div className="relative">
              <input 
                type="text" 
                placeholder="搜索食物..." 
                value={searchInput}
                onChange={(e) => setSearchInput(e.target.value)}
                onKeyPress={handleSearchKeyPress}
                className="w-full pl-10 pr-4 py-2 border border-border-light rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
              />
              <i className="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
            </div>
          </div>
          
          {/* 右侧操作区 */}
          <div className="flex items-center space-x-4">
            {/* 消息通知 */}
            <button 
              onClick={handleNotificationClick}
              className="relative p-2 text-text-secondary hover:text-primary"
            >
              <i className="fas fa-bell text-lg"></i>
              <span className="absolute -top-1 -right-1 w-3 h-3 bg-danger rounded-full"></span>
            </button>
            
            {/* 用户头像和下拉菜单 */}
            <div className="relative">
              <button 
                onClick={handleUserMenuClick}
                className="flex items-center space-x-2 p-1 rounded-lg hover:bg-gray-100"
              >
                <img 
                  src="https://s.coze.cn/image/8o-vhQ1qLaI/" 
                  alt="用户头像" 
                  className="w-8 h-8 rounded-full" 
                  data-category="人物"
                />
                <span className="text-sm text-text-primary">张三</span>
                <i className="fas fa-chevron-down text-xs text-text-secondary"></i>
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* 左侧菜单 */}
      <aside className={`fixed left-0 top-16 bottom-0 w-60 bg-white border-r border-border-light z-40 ${styles.sidebarTransition}`}>
        <nav className="p-4">
          <ul className="space-y-2">
            <li>
              <Link 
                to="/home" 
                className={`${styles.navItem} flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary`}
              >
                <i className="fas fa-home text-lg"></i>
                <span className="font-medium">首页</span>
              </Link>
            </li>
            <li>
              <Link 
                to="/food-search" 
                className={`${styles.navItem} flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary`}
              >
                <i className="fas fa-search text-lg"></i>
                <span className="font-medium">食物搜索</span>
              </Link>
            </li>
            <li>
              <Link 
                to="/record-list" 
                className={`${styles.navItem} flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary`}
              >
                <i className="fas fa-list text-lg"></i>
                <span className="font-medium">饮食记录</span>
              </Link>
            </li>
            <li>
              <Link 
                to="/history" 
                className={`${styles.navItem} flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary`}
              >
                <i className="fas fa-history text-lg"></i>
                <span className="font-medium">历史记录</span>
              </Link>
            </li>
            <li>
              <Link 
                to="/settings" 
                className={`${styles.navItem} ${styles.navItemActive} flex items-center space-x-3 px-4 py-3 rounded-lg`}
              >
                <i className="fas fa-cog text-lg"></i>
                <span className="font-medium">设置</span>
              </Link>
            </li>
          </ul>
        </nav>
      </aside>

      {/* 主内容区 */}
      <main className="ml-60 mt-16 p-6 min-h-screen">
        {/* 页面头部 */}
        <div className="flex items-center justify-between mb-8">
          <div>
            <h2 className="text-2xl font-bold text-text-primary">设置</h2>
            <nav className="flex items-center space-x-2 text-sm text-text-secondary mt-1">
              <span>设置</span>
            </nav>
          </div>
        </div>

        <div className="flex gap-6">
          {/* 设置项列表 */}
          <div className="w-64 bg-white rounded-2xl shadow-card p-6">
            <h3 className="text-lg font-semibold text-text-primary mb-6">设置选项</h3>
            <ul className="space-y-2">
              <li>
                <button 
                  onClick={() => handleSettingChange('calorie-target')}
                  className={`${styles.settingItem} ${activeSetting === 'calorie-target' ? styles.settingItemActive : 'text-text-secondary'} w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left`}
                >
                  <i className={`fas fa-fire ${activeSetting === 'calorie-target' ? 'text-primary' : 'text-text-secondary'}`}></i>
                  <span className="font-medium">每日卡路里目标</span>
                </button>
              </li>
              <li>
                <button 
                  onClick={() => handleSettingChange('personal-info')}
                  className={`${styles.settingItem} ${activeSetting === 'personal-info' ? styles.settingItemActive : 'text-text-secondary'} w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left`}
                >
                  <i className={`fas fa-user ${activeSetting === 'personal-info' ? 'text-primary' : 'text-text-secondary'}`}></i>
                  <span className="font-medium">个人资料</span>
                </button>
              </li>
              <li>
                <button 
                  onClick={() => handleSettingChange('notifications')}
                  className={`${styles.settingItem} ${activeSetting === 'notifications' ? styles.settingItemActive : 'text-text-secondary'} w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left`}
                >
                  <i className={`fas fa-bell ${activeSetting === 'notifications' ? 'text-primary' : 'text-text-secondary'}`}></i>
                  <span className="font-medium">通知设置</span>
                </button>
              </li>
            </ul>
          </div>

          {/* 设置内容区 */}
          <div className="flex-1 space-y-6">
            {/* 每日卡路里目标设置 */}
            <div className={`${styles.settingContent} ${activeSetting === 'calorie-target' ? styles.active : ''} bg-white rounded-2xl shadow-card p-6`}>
              <h3 className="text-lg font-semibold text-text-primary mb-6">每日卡路里目标</h3>
              <form onSubmit={handleCalorieTargetSubmit} className="space-y-6">
                <div className="space-y-2">
                  <label htmlFor="daily-calorie-target" className="block text-sm font-medium text-text-primary">
                    每日计划摄入卡路里
                  </label>
                  <div className="relative">
                    <input 
                      type="number" 
                      id="daily-calorie-target" 
                      name="daily-calorie-target" 
                      value={dailyCalorieTarget}
                      onChange={(e) => setDailyCalorieTarget(e.target.value)}
                      className="w-full pl-4 pr-12 py-3 border border-border-light rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                      min="500" 
                      max="5000"
                    />
                    <span className="absolute right-4 top-1/2 transform -translate-y-1/2 text-text-secondary">kcal</span>
                  </div>
                  <p className="text-sm text-text-secondary">
                    根据您的身体状况和健康目标设置合适的每日卡路里摄入量
                  </p>
                </div>
                <div className="flex justify-end space-x-3 pt-4">
                  <button 
                    type="button" 
                    onClick={handleCalorieTargetCancel}
                    className="px-6 py-2 border border-border-light text-text-secondary rounded-lg hover:bg-gray-50 transition-colors"
                  >
                    取消
                  </button>
                  <button 
                    type="submit" 
                    className="px-6 py-2 bg-primary text-white rounded-lg hover:bg-indigo-600 transition-colors"
                  >
                    保存
                  </button>
                </div>
              </form>
            </div>

            {/* 个人资料设置 */}
            <div className={`${styles.settingContent} ${activeSetting === 'personal-info' ? styles.active : ''} bg-white rounded-2xl shadow-card p-6`}>
              <h3 className="text-lg font-semibold text-text-primary mb-6">个人资料</h3>
              <div className="flex justify-between items-start space-x-6">
                <div className="flex-1">
                  <form onSubmit={handlePersonalInfoSubmit} className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <label htmlFor="nickname" className="block text-sm font-medium text-text-primary">昵称</label>
                        <input 
                          type="text" 
                          id="nickname" 
                          name="nickname" 
                          value={personalInfo.nickname}
                          onChange={(e) => setPersonalInfo({...personalInfo, nickname: e.target.value})}
                          className="w-full px-4 py-3 border border-border-light rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                        />
                      </div>
                      <div className="space-y-2">
                        <label htmlFor="gender" className="block text-sm font-medium text-text-primary">性别</label>
                        <select 
                          id="gender" 
                          name="gender" 
                          value={personalInfo.gender}
                          onChange={(e) => setPersonalInfo({...personalInfo, gender: e.target.value})}
                          className="w-full px-4 py-3 border border-border-light rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                        >
                          <option value="">请选择</option>
                          <option value="male">男</option>
                          <option value="female">女</option>
                          <option value="other">其他</option>
                        </select>
                      </div>
                      <div className="space-y-2">
                        <label htmlFor="age" className="block text-sm font-medium text-text-primary">年龄</label>
                        <input 
                          type="number" 
                          id="age" 
                          name="age" 
                          value={personalInfo.age}
                          onChange={(e) => setPersonalInfo({...personalInfo, age: e.target.value})}
                          className="w-full px-4 py-3 border border-border-light rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                          min="1" 
                          max="120"
                        />
                      </div>
                      <div className="space-y-2">
                        <label htmlFor="height" className="block text-sm font-medium text-text-primary">身高</label>
                        <div className="relative">
                          <input 
                            type="number" 
                            id="height" 
                            name="height" 
                            value={personalInfo.height}
                            onChange={(e) => setPersonalInfo({...personalInfo, height: e.target.value})}
                            className="w-full pl-4 pr-12 py-3 border border-border-light rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                            min="100" 
                            max="250"
                          />
                          <span className="absolute right-4 top-1/2 transform -translate-y-1/2 text-text-secondary">cm</span>
                        </div>
                      </div>
                      <div className="space-y-2">
                        <label htmlFor="weight" className="block text-sm font-medium text-text-primary">体重</label>
                        <div className="relative">
                          <input 
                            type="number" 
                            id="weight" 
                            name="weight" 
                            value={personalInfo.weight}
                            onChange={(e) => setPersonalInfo({...personalInfo, weight: e.target.value})}
                            className="w-full pl-4 pr-12 py-3 border border-border-light rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                            min="30" 
                            max="200" 
                            step="0.1"
                          />
                          <span className="absolute right-4 top-1/2 transform -translate-y-1/2 text-text-secondary">kg</span>
                        </div>
                      </div>
                    </div>
                    <div className="flex justify-end space-x-3 pt-4">
                      <button 
                        type="button" 
                        onClick={handlePersonalInfoCancel}
                        className="px-6 py-2 border border-border-light text-text-secondary rounded-lg hover:bg-gray-50 transition-colors"
                      >
                        取消
                      </button>
                      <button 
                        type="submit" 
                        className="px-6 py-2 bg-primary text-white rounded-lg hover:bg-indigo-600 transition-colors"
                      >
                        保存
                      </button>
                    </div>
                  </form>
                </div>
                <div className="w-32 flex-shrink-0">
                  <div className="text-center">
                    <div className="relative mb-4">
                      <img 
                        src="https://s.coze.cn/image/xQ4_iImDWT8/" 
                        alt="用户头像" 
                        className="w-24 h-24 rounded-full mx-auto" 
                        data-category="人物"
                      />
                      <button 
                        onClick={handleAvatarUpload}
                        className="absolute -bottom-1 -right-1 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center hover:bg-indigo-600 transition-colors"
                      >
                        <i className="fas fa-camera text-sm"></i>
                      </button>
                    </div>
                    <p className="text-sm text-text-secondary">点击更换头像</p>
                  </div>
                </div>
              </div>
            </div>

            {/* 通知设置 */}
            <div className={`${styles.settingContent} ${activeSetting === 'notifications' ? styles.active : ''} bg-white rounded-2xl shadow-card p-6`}>
              <h3 className="text-lg font-semibold text-text-primary mb-6">通知设置</h3>
              <form onSubmit={handleNotificationSettingsSubmit} className="space-y-6">
                <div className="space-y-4">
                  <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                    <div>
                      <h4 className="font-medium text-text-primary">饮食提醒</h4>
                      <p className="text-sm text-text-secondary">定时提醒记录饮食</p>
                    </div>
                    <label className={styles.switch}>
                      <input 
                        type="checkbox" 
                        checked={notificationSettings.mealReminder}
                        onChange={(e) => setNotificationSettings({...notificationSettings, mealReminder: e.target.checked})}
                      />
                      <span className={styles.slider}></span>
                    </label>
                  </div>
                  <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                    <div>
                      <h4 className="font-medium text-text-primary">目标达成通知</h4>
                      <p className="text-sm text-text-secondary">当达到每日卡路里目标时通知</p>
                    </div>
                    <label className={styles.switch}>
                      <input 
                        type="checkbox" 
                        checked={notificationSettings.goalAchievement}
                        onChange={(e) => setNotificationSettings({...notificationSettings, goalAchievement: e.target.checked})}
                      />
                      <span className={styles.slider}></span>
                    </label>
                  </div>
                  <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                    <div>
                      <h4 className="font-medium text-text-primary">每日总结</h4>
                      <p className="text-sm text-text-secondary">每天晚上发送当日饮食总结</p>
                    </div>
                    <label className={styles.switch}>
                      <input 
                        type="checkbox" 
                        checked={notificationSettings.dailySummary}
                        onChange={(e) => setNotificationSettings({...notificationSettings, dailySummary: e.target.checked})}
                      />
                      <span className={styles.slider}></span>
                    </label>
                  </div>
                  <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                    <div>
                      <h4 className="font-medium text-text-primary">周报提醒</h4>
                      <p className="text-sm text-text-secondary">每周发送饮食分析报告</p>
                    </div>
                    <label className={styles.switch}>
                      <input 
                        type="checkbox" 
                        checked={notificationSettings.weeklyReport}
                        onChange={(e) => setNotificationSettings({...notificationSettings, weeklyReport: e.target.checked})}
                      />
                      <span className={styles.slider}></span>
                    </label>
                  </div>
                </div>
                <div className="flex justify-end space-x-3 pt-4">
                  <button 
                    type="button" 
                    onClick={handleNotificationSettingsCancel}
                    className="px-6 py-2 border border-border-light text-text-secondary rounded-lg hover:bg-gray-50 transition-colors"
                  >
                    取消
                  </button>
                  <button 
                    type="submit" 
                    className="px-6 py-2 bg-primary text-white rounded-lg hover:bg-indigo-600 transition-colors"
                  >
                    保存
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

export default SettingsPage;

